<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>02 offsetWidth和offsetHeight</title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				border: 1px solid #000;
				background-color: red;
				padding-left: 10px;
				padding-right: 20px;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div id="box" style="width: 100px;height: 100px;"></div>
		<script type="text/javascript">
			// offsetWidth = width + border-left-width + border-right-width + padding-left-width + padding-right-width
			var box = document.getElementById('box');
			console.log(box.offsetWidth,box.offsetHeight);
			// 只能获取行内的属性
			console.log(box.style.width,box.style.height);
			
			// 因为offsetWidth和offsetHeight 它们是只读
			// box.offsetWidth = 500;
			box.style.width = 500 + 'px';
		</script>
	</body>
</html>
